import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 要操作的数据，有可能就是简单的数值类型，也有可能是复杂数据类型（对象、数组）
  state: {
    count: 100
  },
  // 从仓库中取值
  getters: {
    getCount (state) {
      return state.count
    }
  },
  // 同步的去更改仓库中的值（只有同步的这里才能更改state中的值）
  mutations: {
    /** 对仓库中的count进行加的操作 */
    /**
     *
     * @param {*} state state
     * @param {*} payload 载荷，它的类型可以是一个简单的值类型，也可以是一个复杂类型
     */
    addCount (state, payload) {
      state.count += payload
    },
    /**
     *
     * @param {*} state 仓库中的state
     * @param {*} n 载荷
     */
    minusCount (state, n) {
      state.count -= n
    }
  },
  // 异步的更改仓库中的值（只能调用同步的mutations，然后同步的mutations里面再更改仓库中的值）
  actions: {
    /**
     *
     * @param {*} context 上下文，调用同步mutations
     * @param {*} n
     */
    asyncMinucCount (context, n) {
      // 模拟获取数据
      setTimeout(() => {
        context.commit('minusCount', n)
      }, 2000)
    }
  }
  // modules: {}
})
